<template>
  <div class="yj-siderbar">
    <div style="width: 190px">
      <div class="siderbar-log">
        <img src="../../assets/dreamweb.png" alt="">
      </div>
      <div class="siderbar-line">
        <div class="line"></div>
      </div>
      {{ routeName }}
      <a-menu
        class="siderbar-menu"
        v-model:openKeys="state.openKeys"
        v-model:selectedKeys="state.selectedKeys"
        mode="vertical"
        :inline-collapsed="state.collapsed"
        :items="items"
        @click="handleOpen"
      >
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, h } from 'vue'
import {
  PieChartOutlined,
  DesktopOutlined,
  SettingOutlined,
  ShopOutlined,
  InboxOutlined,
} from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const state = reactive({
  collapsed: false,
  selectedKeys: ['home'],
  openKeys: [],
})
const items = reactive([
  {
    key: 'home',
    icon: () => h(PieChartOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: 'zip',
    icon: () => h(DesktopOutlined),
    label: '压缩文件',
    title: '压缩文件',
  },
  {
    key: 'changeWord',
    icon: () => h(InboxOutlined),
    label: '生成文档',
    title: '生成文档',
  },
  {
    key: 'code',
    icon: () => h(ShopOutlined),
    label: '低代码平台',
    title: '低代码平台',
  },
  {
    key: "setting",
    icon: () => h(SettingOutlined),
    label: '设置',
    title: '设置',
  }
])
// 获取id 对应数据
// function handleTreeGetChooseId(tree: string | any[], chooseId: any): any {
//   for (let i = 0; i < tree.length; i++) {
//     const item = tree[i];
//     if (item.id === chooseId) {
//       return item
//     } else {
//       if (item.children) {
//         const node = handleTreeGetChooseId(item.children, chooseId);
//         if (node) {
//           return node
//         }
//       }
//     }
//   }
// }

// const pagename = route.name;
// const current = handleTreeGetChooseId(items, pagename)
router.push({
  path: "/home"
})
const routeName = route.name
const handleOpen: MenuProps['onClick'] = menuInfo => {
  const key = menuInfo.key;
  switch (key) {
    case "home":
      router.push({
        path: key
      })
      break;
    case "zip":
      router.push({
        path: key
      })
      break
    case "changeWord":
      router.push({
        path: key
      })
      break
    case "code":
      router.push({
        path: "/develop"
      })
      break
    case "setting":
      router.push({
        path: key
      })
      break
  }
}
</script>

<style lang="scss" scoped>
.yj-siderbar{
  height: 100vh;
  background-color: #0073ca;
  padding-top: 30px;
  box-sizing: border-box;
  .siderbar-log{
    display: flex;
    justify-content: center;
    cursor: pointer;
    img{
      height: 37px;
    }
  }
  .siderbar-line{
    box-sizing: border-box;
    padding: 18px 15px 20px;
    .line{
      height: 1px;
      background-color: #83c4f5;
    }
  }
  .siderbar-menu{
    font-size: 18px;
    color: #fff;
  }
  ::v-deep .ant-menu{
    background-color: #0073ca;
  }
  ::v-deep .ant-menu-item-icon{
    font-size: 20px;
  }
  ::v-deep .ant-menu-item:hover{
    // background-color: unset !important;
    // color: #fff !important;
  }
}
</style>
